import React, { Component } from 'react' // Component：基类
import http from '../http';
import ComB from './ComB';

class ComA extends Component {
    // 类组件 有this 有数据状态 有生命周期 功能完善
    // 函数组件  没有this 无状态 没有生命周期 功能简单 有hook
    constructor() { // 构造函数 构造器
        super();
        this.state = { // 状态机--类似vue中的data，保存数据 初始化数据.和vue中的data一样，数据的变化会引起页面的更新
            obj1: {
                name: 'Anbei',
                time: '2022-07-08',
                isD: true
            },
            isD: true,
            age: 18
        }
        // 初始化时 修改函数的this指向
        this.change = this.change.bind(this)
    }
    change(arg1) {
        console.log(arg1);
        // setState修改state数据，然后会自动调用render
        // setState 是一个异步函数，原因是这个函数会操作dom，比较耗时，为了提高效率才转为异步
        this.setState({
            isD: !this.state.isD,
            age: this.state.age + 1
        }, () => {
            // 回调函数
            console.log(this.state.age);
        })
    }
    getValFromC(a, b) {
        // 子传父--首先父传子一个函数，在子组件中调用父组件传过来的函数。
        // 并向函数传参，参数就是子传父的数据
        console.log(a);
        console.log(b);
    }
    getData() {
        fetch('https://cloud-music-api-b2fzzb6bv-langjianhui.vercel.app/top/playlist/highquality').then(res => res.json()).then(res => console.log(res.playlists));
    }
    getHttp(){
        http.get('https://cloud-music-api-b2fzzb6bv-langjianhui.vercel.app/top/playlist/highquality').then(res => console.log(res)).catch(err=>{console.log(err)});
    }
    
    render() {
        return (
            // 空标签
            <>
                <p>{this.state.isD ? '汪峰老师' : '加鸡腿'}</p>
                <p>{this.state.age}</p>
                {/* es6 绑定事件的写法 箭头函数的缩写。事件对象的传递是显式传参 */}
                <button onClick={(e) => this.change(e)}>toggle1</button>
                {/* es5 直接绑定,this执行有问题，需要通过bind修改.事件对象的传递是隐式传参，看不到 */}
                <button onClick={this.change.bind(this)}>toggle</button>
                {/* ES5的第二种方式 */}
                <button onClick={this.change}>toggle</button>
                {/* 获取请求 */}
                <button onClick={(e) => this.getData()}>获取数据</button>
                <button onClick={(e) => this.getHttp()}>https</button>
                <ComB
                    val1={this.state.age}
                    val2="hello"
                    val3={this.getValFromC}
                ></ComB>
            </>
        )
    }
}

export default ComA
